<template>
    <el-card shadow="never">
        <div slot="header">动态表单(upload)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/upload.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '上传',
                        widget: 'upload',
                        props: {
                            tip: '只能上传jpg/png文件，且不超过500kb',
                            size: 500
                        },
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/'
                        }
                    },
                    num2: {
                        label: '卡片模式(默认)',
                        widget: 'upload',
                        props: {
                            tip: '只能上传jpg/png文件，且不超过500kb',
                            size: 500
                        },
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            listType: 'picture-card',
                            limit: 1,
                            onPreview: (file) => {
                                this.$message(`${file.name} 被点击！`)
                            }
                        }
                    },
                    num3: {
                        label: '卡片模式(medium)',
                        widget: 'upload',
                        col: {
                            span: 8
                        },
                        props: {
                            tip: '只能上传jpg/png文件，且不超过500kb',
                            size: 500,
                            pictureCardSize: 'medium'
                        },
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            listType: 'picture-card',
                            limit: 1,
                            onPreview: (file) => {
                                this.$message(`${file.name} 被点击！`)
                            }
                        }
                    },
                    num4: {
                        label: '卡片模式(small)',
                        widget: 'upload',
                        col: {
                            span: 8
                        },
                        props: {
                            tip: '只能上传jpg/png文件，且不超过500kb',
                            size: 500,
                            pictureCardSize: 'small'
                        },
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            listType: 'picture-card',
                            limit: 1,
                            onPreview: (file) => {
                                this.$message(`${file.name} 被点击！`)
                            }
                        }
                    },
                    num5: {
                        label: '卡片模式(mini)',
                        widget: 'upload',
                        col: {
                            span: 8
                        },
                        props: {
                            tip: '只能上传jpg/png文件，且不超过500kb',
                            size: 500,
                            pictureCardSize: 'mini'
                        },
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            listType: 'picture-card',
                            limit: 1,
                            onPreview: (file) => {
                                this.$message(`${file.name} 被点击！`)
                            }
                        }
                    },
                    num6: {
                        label: '卡片列表模式',
                        widget: 'upload',
                        props: {
                            tip: '只能上传jpg/png文件，且不超过500kb'
                        },
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            listType: 'picture',
                            onPreview: (file) => {
                                this.$message(`${file.name} 被点击！`)
                            }
                        }
                    },
                    num7: {
                        label: '拖拽',
                        widget: 'upload',
                        props: {
                            tip: '只能上传jpg/png文件，且不超过500kb',
                            size: 500
                        },
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            drag: true,
                            onPreview: (file) => {
                                this.$message(`${file.name} 被点击！`)
                            }
                        }
                    }
                },
                ui: {
                    labelWidth: '150px',
                },
                grid: {
                    row: {
                        gutter: 20,
                        type: 'flex',
                        align: 'middle',
                        wrap: 'wrap'
                    },
                    col: {
                        span: 12
                    }
                }
            },
            formData: { 
                num1: [
                    {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
                    {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
                ]
            }
        }
    }
}
</script>

<style>

</style>